<template>  
    <div class="container">   
      <div class="main">  
        <div class="header">  
          <el-button type="primary" @click="add">新建</el-button>  
          <el-button type="success" @click="importData">导入</el-button>  
          <el-button type="warning" @click="edit">编辑</el-button>  
          <el-select v-model="selectedFilter" placeholder="请选择状态" style="width: 200px;">  
            <el-option label="启用" value="enabled"></el-option>  
            <el-option label="禁用" value="disabled"></el-option>  
          </el-select>  
          <el-input placeholder="请输入关键字搜索" v-model="searchTable" style="width: 200px;"/>  
          <el-button type="info" @click="query">查询</el-button>  
          <el-button type="info" @click="query">重置</el-button>  
        </div>  
        <el-table :data="tableData" border class="eltable">  
          <el-table-column prop="kw_id" label="序号" width="80"></el-table-column>  
          <el-table-column prop="kw_code" label="库位编码" width="160"></el-table-column>  
          <el-table-column prop="kw_name" label="库位名称"></el-table-column>  
          <el-table-column prop="kw_mj" label="面积"></el-table-column>  
          <el-table-column prop="kw_zzl" label="最大载重量" ></el-table-column>  
          <el-table-column prop="kw_x" label="库位位置X" ></el-table-column>  
          <el-table-column prop="kw_y" label="库位位置Y"></el-table-column>  
          <el-table-column prop="kw_z" label="库位位置Z"></el-table-column>  
          <el-table-column prop="ck_name" label="所属仓库" ></el-table-column>  
          <el-table-column prop="kq_name" label="所属库位"></el-table-column>  
          <el-table-column prop="bz" label="备注"></el-table-column>
          <el-table-column prop="kw_zt" label="启用" width="120">  
            <template #default="{ row }">  
              <el-switch v-model="row.kw_zt" active-text="是" inactive-text="否" @change="handleSwitchChange(row)"></el-switch>  
            </template>  
          </el-table-column>  
          <el-table-column label="操作" width="100">  
            <template #default="{ row }">  
              <el-button type="text" @click="editRow(row)">编辑</el-button>  
              <el-button type="text" @click="deleteRow(row)">删除</el-button>  
            </template>  
          </el-table-column>  
        </el-table>  
        <el-pagination  
          @current-change="handleCurrentChange"  
          :current-page="currentPage"  
          :page-size="pageSize"  
          :total="totalItems"  
          layout="total, prev, pager, next, jumper">  
        </el-pagination>  
      </div>  
    </div>  
    <el-dialog v-model="dialogVisible" title="添加库位" width="800" :before-close="handleClose">
    <el-form :model="form" class="demo-form-inline" :rules="rules" ref="formRef">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="库位名称" :label-width="formLabelWidth" prop="kw_name">
            <el-input v-model="form.kw_name" placeholder="请输入库位名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="面积" :label-width="formLabelWidth" prop="kw_mj">
            <el-input v-model="form.kw_mj" placeholder="请输入面积" type="number" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="最大载重量" :label-width="formLabelWidth" prop="kw_zzl">
            <el-input v-model="form.kw_zzl" placeholder="请输入最大载重量" type="number" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="库位位置X" :label-width="formLabelWidth" prop="kw_x">
            <el-input v-model="form.kw_x" placeholder="请输入库位位置X" type="number" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20"> 
        <el-col :span="12">
          <el-form-item label="库位位置Y" :label-width="formLabelWidth" prop="kw_y">
            <el-input v-model="form.kw_y" placeholder="请输入库位位置Y" type="number" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="库位位置Z" :label-width="formLabelWidth" prop="kw_z">
            <el-input v-model="form.kw_z" placeholder="请输入库位位置Y" type="number" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="所属仓库" :label-width="formLabelWidth" prop="kw_ssck">
            <el-select v-model="form.kw_ssck" placeholder="请选择所属仓库" @change="handleWarehouseChange">
              <el-option v-for="option in warehouseOptions" :key="option.value" :label="option.label"
                :value="option.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属库区" :label-width="formLabelWidth" prop="kw_sskq">
            <el-select v-model="form.kw_sskq" placeholder="请选择所属仓区">
              <el-option v-for="option in locations" :key="option.value" :label="option.label"
                :value="option.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" :label-width="formLabelWidth" prop="bz">
            <el-input v-model="form.bz" placeholder="请输入备注" type="textarea" :rows="3"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
  <el-dialog v-model="dialogVisible1" title="修改库位" width="800" :before-close="handleClose">
    <el-form :model="xgform" class="demo-form-inline" :rules="rules" ref="formRef">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="库位名称" :label-width="formLabelWidth" prop="kw_name">
            <el-input v-model="xgform.kw_name" placeholder="请输入库位名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="面积" :label-width="formLabelWidth" prop="kw_mj">
            <el-input v-model="xgform.kw_mj" placeholder="请输入面积" type="number" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="最大载重量" :label-width="formLabelWidth" prop="kw_zzl">
            <el-input v-model="xgform.kw_zzl" placeholder="请输入最大载重量" type="number" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="库位位置X" :label-width="formLabelWidth" prop="kw_x">
            <el-input v-model="xgform.kw_x" placeholder="请输入库位位置X" type="number" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20"> 
        <el-col :span="12">
          <el-form-item label="库位位置Y" :label-width="formLabelWidth" prop="kw_y">
            <el-input v-model="xgform.kw_y" placeholder="请输入库位位置Y" type="number" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="库位位置Z" :label-width="formLabelWidth" prop="kw_z">
            <el-input v-model="xgform.kw_z" placeholder="请输入库位位置Y" type="number" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="所属仓库" :label-width="formLabelWidth" prop="kw_ssck">
            <el-select v-model="xgform.kw_ssck" placeholder="请选择所属仓库" @change="handleWarehouseChange">
              <el-option v-for="option in warehouseOptions" :key="option.value" :label="option.label"
                :value="option.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属库区" :label-width="formLabelWidth" prop="kw_sskq">
            <el-select v-model="xgform.kw_sskq" placeholder="请选择所属仓区">
              <el-option v-for="option in locations" :key="option.value" :label="option.label"
                :value="option.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" :label-width="formLabelWidth" prop="bz">
            <el-input v-model="xgform.bz" placeholder="请输入备注" type="textarea" :rows="3"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="dialog-footer">
      <el-button @click="dialogVisible1 = false">取 消</el-button>
      <el-button type="primary" @click="upqr">确 定</el-button>
    </div>
  </el-dialog>
  </template>  
  
  <script>  
  import axios from 'axios';
  import { ref,onMounted } from 'vue';  
  
  export default {  
    setup() {  
      const userId = localStorage.getItem('userId');
      const searchKey = ref('');  
      const treeData = ref([]);  
      const defaultProps = {  
        children: 'children',  
        label: 'label',  
      };  
  
      const tableData = ref([]);  
  
      const selectedFilter = ref('');  
      const searchTable = ref('');  
      const currentPage = ref(1);  
      const pageSize = ref(5);  
      const totalItems = ref(3);
      const dialogVisible = ref(false);
      const dialogVisible1 = ref(false);
      const warehouseOptions = ref([]);
      const locations = ref([]);
      const form = ref({  
        kw_code: '',  
        kw_name: '',  
        kw_mj: '',  
        kw_zzl: '',  
        kw_x: '',  
        kw_y: '',  
        kw_z: '',  
        kw_ssck: '',  
        kw_sskq: '',  
        bz: '',  
      });
      const xgform = ref({  
        kw_id: '',  
        kw_code: '',  
        kw_name: '',  
        kw_mj: '',  
        kw_zzl: '',  
        kw_x: '',  
        kw_y: '',  
        kw_z: '',  
        kw_ssck: '',  
        kw_sskq: '',  
        bz: '',  
      })
      function sx() {  
        axios.get('/api/Wbd_kw/GetFYWbd_kw?PageNumber=' + currentPage.value + '&PageSize=' + pageSize.value)  
          .then(function (response) { 
            console.log(response.data);
            totalItems.value = response.data.zon;
            tableData.value = response.data.wbd_Kws.map(item => (  
              {  
                ...item,  
                kw_zt: item.kw_zt === 1, // 1 -> true, 0 -> false  
              }  
            ));
          })  
          .catch(function (error) {  
            console.error('错误:', error);  
          });
      }
      sx();
      // 获取仓库数据（下拉框）
      const fetchWarehouseOptions = async () => {
      try {
        const response = await axios.get('/api/Wbd_ck/Wbd_Ck');
        console.log(response.data);
        warehouseOptions.value = response.data.map(item => ({
          label: item.ck_name, // 假设返回的数据中仓库名称字段为 name
          value: item.ck_code    // 假设返回的数据中仓库 ID 字段为 id
        }));
      } catch (error) {
        console.error('获取仓库数据失败:', error);
      }
    };
     // 获取库区数据（下拉框）
    const fetchLocationOptions =async (ck_code) => {
      try{
          const response = await axios.get('/api/Wbd_kq/Getcode?code='+ck_code);
          locations.value = response.data.map(item => ({
            label: item.kq_name,
            value: item.kq_code
          }));
      }catch(error){
          console.error('获取库区数据失败:', error);
      }
    };
    const handleWarehouseChange = async (ck_code) => {
      if (ck_code) {
        fetchLocationOptions(ck_code); // 根据仓库代码查询库区数据
      } else {
        locations.value = []; // 如果没有选择仓库，清空库区选项
      }
    };
      const add = () => {  
        // 添加逻辑  
        dialogVisible.value = true;
      };  
      const submitForm = async () => {
        const formData = {  
          kw_code: form.value.kw_code,
          kw_name: form.value.kw_name,  
          kw_mj: form.value.kw_mj,  
          kw_zzl: form.value.kw_zzl,  
          kw_x: form.value.kw_x,  
          kw_y: form.value.kw_y,  
          kw_z: form.value.kw_z,  
          kw_ssck: form.value.kw_ssck,  
          kw_sskq: form.value.kw_sskq,  
          bz: form.value.bz,  
          create_by: userId,
        }
        console.log(formData);
        try {
          const response = await axios.post('/api/Wbd_kw/AddWbd_kw', formData);
          console.log(formData);
          if(response.data){
             ElMessage.error('增加成功');
            sx();
            dialogVisible.value = false;
          }
        }catch(error){
          console.error('请求错误:', error);
        }
      };
      const upqr = async () => {
        const formData = {
          kw_id: xgform.value.kw_id,
          kw_code: xgform.value.kw_code,
          kw_name: xgform.value.kw_name,
          kw_mj: xgform.value.kw_mj,
          kw_zzl: xgform.value.kw_zzl,
          kw_x: xgform.value.kw_x,
          kw_y: xgform.value.kw_y,
          kw_z: xgform.value.kw_z,
          kw_ssck: xgform.value.kw_ssck,
          kw_sskq: xgform.value.kw_sskq,
          bz: xgform.value.bz,
          update_by: userId,
        }
        console.log(formData);
        try {
          const response = await axios.put('/api/Wbd_kw/UpWbd_kw', formData);
          if(response.data){
             ElMessage.error('修改成功');
            sx();
            dialogVisible1.value = false;
          }
        }catch(error){  
          console.error('请求错误:', error);
        }
      };
      const handleSwitchChange=(row)=>{
      const newStatus = row.kw_zt ? 1 : 0;
      axios.put(`/api/Wbd_kw/UpZt?id=${row.kw_id}&zt=${newStatus}`)
        .then(response => {
          console.log('状态更新成功:', response);

        })
        .catch(error => {
          // 如果更新失败，你可能需要重置开关的状态  
          /// 还原状态  
        })
    }
      const edit = () => {  
        // 编辑逻辑  
      };  
  
      const importData = () => {  
        // 导入逻辑  
      };  
  
      const query = () => {  
        // 查询逻辑  
        console.log('Querying with:', searchTable.value);  
      };  
  
      const editRow = (row) => {  
        // 编辑行逻辑  
        console.log('Editing row:', row);  
        dialogVisible1.value = true;
        xgform.value = row;
        fetchLocationOptions(xgform.value.kw_ssck);

      };  
  
      const deleteRow = (row) => {  
        // 删除行逻辑  
        console.log('Deleting row:', row.kw_id); 
        if (confirm('确定要删除吗？')) {  
          axios.put('/api/Wbd_kw/IsDeWbd_kw?id='+ row.kw_id) 
        .then(function (response) {
          console.log(response.data);
          if (response.data) {  
             ElMessage.error('删除成功');  
            sx();  
          } 
        })
        .catch(function (error) {  
          console.error('错误:', error);  
        })
        }
      };  
  
      const handleCurrentChange = (page) => {  
        currentPage.value = page;  
        // 分页逻辑  
        console.log('Current page:', page);  
        sx();
      };  
      onMounted(() => {
      fetchWarehouseOptions();

    });
      // 确保所有函数都被返回  
      return {  
        searchKey,  
        treeData,  
        defaultProps,  
        tableData,  
        selectedFilter,  
        searchTable,  
        currentPage,  
        pageSize,  
        totalItems,  
        add,  
        edit,  
        importData,  
        query,  
        editRow,  
        deleteRow,  
        handleCurrentChange,  
        dialogVisible,  
        dialogVisible1,  
        form,  
        warehouseOptions,
        fetchWarehouseOptions,
        locations,
        handleWarehouseChange,
        submitForm,
        userId,
        xgform,
        upqr,
        handleSwitchChange
      };  
    },  
  };  
  </script>  
  
  <style>  
.container {  
  display: flex;  
  gap: 20px;
  height: 95%;
}  

.sidebar {  
  height: 100%;
  
}  

.main {  
  width: 80%;
  flex: 1;  
  height: 100%;
}  

.header {  
   display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}  
.eltable{
  height: 95%;
}
.letree{
  height: 100%;
}
</style>